<template>
  <div v-if="visible">
    <el-dialog :visible.sync="visible"
               title="公告详情"
               :modal="false"
               class="user-dialog add-or-updata"
               width="50%"
               :before-close="closeDialog"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <div class="detail-box">
        <div>{{ dataForm.announcementSubject }}</div>
        <div v-if="dataForm.updateDate">{{ dataForm.updateDate.substring(0,10).replace(/-/g,'.') }}</div>
        <div>
          <div v-if="dataForm.noticeType === '1'">{{ dataForm.announcementContent }}</div>
          <div v-if="dataForm.noticeType === '2'">
            <img :src="dataForm.announcementContent"
                 alt="">
          </div>
          <div v-if="dataForm.noticeType === '3'">
            <video controls>
              <source :src="dataForm.announcementContent"
                      type="video/mp4">
            </video>
          </div>
          <div v-if="dataForm.noticeType === '4'"
               v-html="dataForm.announcementContent"></div>
        </div>
      </div>
      <!-- <el-form :model="dataForm"
               v-loading="dataListLoading"
               :element-loading-text="$t('loading')"
               ref="dataForm"
               label-position="left"
               @keyup.enter.native="dataFormSubmitHandle()"
               label-width="120px">
        <el-form-item prop="announcementSubject"
                      :rules="required()"
                      label="公告主题">
          <el-input v-model.trim="dataForm.announcementSubject"
                    maxlength="20"
                    placeholder="请输入公告主题"></el-input>
        </el-form-item>
        <el-form-item prop="announcementContent"
                      label="公告内容"
                      :rules="required()"
                      v-if="dataForm.noticeType === '1'">
          <el-input type="textarea"
                    :autosize="{ minRows: 3, maxRows: 4}"
                    maxlength="200"
                    show-word-limit
                    v-model="dataForm.announcementContent"
                    placeholder="请输入公告内容"></el-input>
        </el-form-item>

        <el-form-item prop="imageUrl"
                      label="图片上传"
                      :rules="required()"
                      v-if="dataForm.noticeType === '2'">
          <file-upload reg=".(png|jpeg|jpg)$"
                       title="上传图片"
                       ref="fileUpload"
                       uploadType="picture-card"
                       accept=".jpeg,.jpg,.png"
                       :limit="1"
                       v-model="dataForm.imageUrl"
                       :paramData="{bucketName:'announcement/images'}"
                       action="/springbootApi/system/oss/upload" />
        </el-form-item>
        <el-form-item prop="videoUrl"
                      label="视频上传"
                      :rules="required()"
                      v-if="dataForm.noticeType === '3'">
          <file-upload reg=".(mp4)$"
                       title="上传视频"
                       ref="fileUpload"
                       uploadType="file"
                       accept=".mp4"
                       :limit="1"
                       v-model="dataForm.videoUrl"
                       :paramData="{bucketName:'announcement/radio'}"
                       action="/springbootApi/system/oss/upload" />
        </el-form-item>
        <el-form-item label="文章内容"
                      v-if="dataForm.noticeType === '4'">
          <tinymce ref="tinymce"
                   :isEdit='!!dataForm.id' />
        </el-form-item>
      </el-form> -->
      <!-- <template slot="footer">
        <el-button type="primary"
                   :loading="dataListLoading"
                   @click="closeDialog()">{{ $t('confirm')}}</el-button>
      </template> -->
    </el-dialog>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import tinymce from '@/components/tinymce/tinymce'
import fileUpload from '@/components/file-upload/file-upload'
export default {
  mixins: [mixinViewModule, minFormValidate],
  data () {
    return {
      mixinViewModuleOptions: {
        deleteImgURL: '',
        getDataListURL: '', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addURL: 'tb/noticeAnnouncement/add', // 添加或修改接口，API地址
        updateURL: 'tb/noticeAnnouncement/revise', // 添加或修改接口，API地址
        getDataInfoURL: '', // 数据详情，API地址
        deleteURL: '', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '', // 导出接口，API地址
        publishUrl: ''
      },
      visible: false,
      dataForm: {
        status: true
      }
    }
  },
  components: { tinymce, fileUpload },
  methods: {
    // successImgLoad (name, url) {
    //   this.dataForm.imageUrl = url
    // },
    // handleImgRemove (url) {
    //   this.dataForm.imageUrl = ''
    //   this.deleteData({
    //     url: this.mixinViewModuleOptions.deleteImgURL,
    //     paramData: { files: url.url },
    //     isLoading: false
    //   })
    // },
    // successImgLoad1 (name, url) {
    //   this.dataForm.videoUrl = url
    // },
    // handleImgRemove1 (url) {
    //   this.dataForm.videoUrl = ''
    //   this.deleteData({
    //     url: this.mixinViewModuleOptions.deleteImgURL,
    //     paramData: { files: url.url },
    //     isLoading: false
    //   })
    // },
    init (data) {
      if (data) {
        this.dataForm = data
      }
      this.visible = true
      // this.$nextTick(() => {
      //   if (this.dataForm.id && this.dataForm.noticeType === '2') {
      //     this.$refs.fileUpload.init([])
      //     let list = []
      //     list.push({
      //       name: this.dataForm.announcementContent,
      //       url: this.dataForm.announcementContent
      //     })
      //     this.$refs.fileUpload.init(list)
      //   } else if (this.dataForm.id && this.dataForm.noticeType === '3') {
      //     this.$refs.fileUpload.init([])
      //     let list = []
      //     list.push({
      //       name: this.dataForm.announcementContent,
      //       url: this.dataForm.announcementContent
      //     })
      //     this.$refs.fileUpload.init(list)
      //   } else if (this.dataForm.id && this.dataForm.noticeType === '4') {
      //     const rests = this.dataForm.announcementContent || ''
      //     this.dataForm.announcementContent = rests
      //     this.$refs.tinymce.init(rests)
      //   }
      // })
    },
    closeDialog () {
      this.dataForm = {}
      // if (this.dataForm.type === '4') {
      //   this.$refs.tinymce.clear()
      // }
      this.$emit('callBack')
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 18px;
}
</style>
